<script setup lang="ts">
import { onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useHistory } from '../composables/useHistory'
import type { HistoryRecord } from '../api/watermark'

const { history, loading, fetchHistory, deleteRecord } = useHistory()

// 删除记录确认
const confirmDelete = async (id: string) => {
  try {
    await ElMessageBox.confirm('确认删除该处理记录？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await deleteRecord(id)
  } catch (error) {
    // 用户取消删除操作，不做处理
  }
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', { 
    year: 'numeric', 
    month: '2-digit', 
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 查看处理结果
const viewResult = (item: HistoryRecord) => {
  window.open(item.resultUrl, '_blank')
}

// 在组件挂载时获取历史记录
onMounted(fetchHistory)
</script>

<template>
  <div class="history-page">
    <div class="page-header">
      <h1 class="text-2xl font-bold mb-2">处理历史</h1>
      <p class="text-gray-600 mb-6">查看您之前处理过的所有文件</p>
    </div>
    
    <div class="history-content">
      <el-card shadow="never" class="history-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span>历史记录</span>
            <el-button @click="fetchHistory" :loading="loading" text>
              <el-icon><refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </template>
        
        <el-table
          v-loading="loading"
          :data="history"
          style="width: 100%"
          empty-text="暂无处理记录"
        >
          <el-table-column prop="fileName" label="文件名" min-width="200" />
          <el-table-column label="处理时间" min-width="180">
            <template #default="scope">
              {{ formatDate(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="scope">
              <el-button type="primary" size="small" @click="viewResult(scope.row)">
                查看结果
              </el-button>
              <el-button type="danger" size="small" plain @click="confirmDelete(scope.row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.history-page {
  max-width: 1000px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.history-card {
  border-radius: 8px;
}
</style> 